<template>
  <!-- 添加或修改菜单对话框 -->
  <!-- custom-class
       form 弹窗 默认必加--------------------------------------------------------
       dialogForm            =>  默认控制样式区域 管理部分公用样式
       form 弹窗 按布局格式添加 --------------------------------------------------
       dialogFormItemUDForm  =>  控制 form-item (label 、content) 上下布局样式 控制
       dialogFormItemLRForm  =>  控制 form-item (label 、content) 左右布局样式 控制
  -->
  <el-dialog v-loading="dialogFormLoading" :title="dialogFormTitle" custom-class="dialogForm dialogFormItemUDForm" :visible.sync="dialogFormVisibleBool" width="600px" :show-close="false">
    <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormType!=='view'?dialogRules:{}"
             :class="dialogFormType==='view'?'formTable p-px-t-14':'p-px-t-4'" :label-width="dialogFormType==='view'?(4* 1.4 + 1.2 + 1.2 + 'rem' ):''">
      <el-row class="formRow" :gutter="dialogFormType==='view'?0:24">
        <el-col v-if="dialogForm.parentId !== 0" :span="24">
          <el-form-item label="上级部门" prop="parentId">
            <treeselect v-model.trim="dialogForm.parentId" :options="deptOptions"
                        placeholder="选择上级部门" class="zjm-treeselect-h32"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model.trim="dialogForm.deptName" placeholder="请输入部门名称" maxlength="30" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
            <el-input
              v-model.trim="dialogForm.orderNum"
              v-input.float="{'float':0,'min':0,'max':999}"
              placeholder="请输入显示排序"
              @focus="focusNumBerFun($event)"
              @blur="blurNumBerFun($event,0,dialogForm,'orderNum')"
            >
            </el-input>
            <!-- <el-input v-model.trim="dialogForm.orderNum" placeholder="请输入显示排序" maxlength="3" show-word-limit /> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="leader">
            <el-input v-model.trim="dialogForm.leader" placeholder="请输入负责人" maxlength="30" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model.trim="dialogForm.phone" placeholder="请输入联系电话" maxlength="11" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model.trim="dialogForm.email" placeholder="请输入邮箱" maxlength="20" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门状态">
            <el-radio-group v-model.trim="dialogForm.status">
              <el-radio
                v-for="dict in sysNormalDisableOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogSubmitForm">确 定</el-button>
      <el-button @click="dialogResetFormMixins">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 混入
import { dialogFormMixins } from '@/mixins/publicMixins/dialogFormMixins'
// 组件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// -------------------------------------------------------------
export default {
  name: 'DeptDialog',
  mixins: [dialogFormMixins],
  components: { Treeselect },
  data() {
    return {
      // 表单参数
      dialogForm: {},
      dialogRules: {
        parentId: [
          { required: true, message: '上级部门不能为空', trigger: 'blur' }
        ],
        deptName: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '显示排序不能为空', trigger: 'blur' }
          // { pattern: /^[1-9]\d*$/, message: '排序只能输入数字', trigger: 'blur' }
        ],
        email: [{ required: false, trigger: 'blur', msg: '邮箱', validator: (rule, value, callback) => this.regularFun(rule, value, callback, 'email') }],
        phone: [{ required: false, msg: '联系电话', trigger: 'blur', validator: (rule, value, callback) => this.regularFun(rule, value, callback, 'phone') }],
        fillInLogs: [
          { required: true, message: '是否需要填写日志不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getOptionsMixins('deptOptions', '/system/dept/treeselect')
    this.getDictMixins('sysNormalDisableOptions', 'sys_normal_disable')
  },
  mounted() {
  },
  methods: {

    /**
     * @description: 重新打开弹窗是赋初始值
     * @Author: baoxuhui
     * @return {*}
     */
    dialogResetForm() {
      this.dialogForm = {
        deptId: undefined,
        parentId: undefined,
        deptName: undefined,
        orderNum: undefined,
        leader: undefined,
        phone: undefined,
        email: undefined,
        status: '0',
        fillInLogs: 'N'
      }
      this.resetForm('dialogForm')
    },
    /**
    * @description: 保存
    * @Author: baoxuhui
    * @return {*}
    */
    dialogSubmitForm() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          let url = null; let type = null

          if (this.dialogForm.deptId !== undefined) {
            url = '/system/dept/edit'
            type = '修改'
          } else {
            url = '/system/dept'
            type = '新增'
          }
          this.dialogSaveOrUpdateMixins(url, this.dialogForm, type)
        }
      })
    },

    /**
     * @description: 调取详情
     * @Author: baoxuhui
     * @return {*}
     */
    dialogDetailApi(row) {
      const url = '/system/dept/' + row.deptId
      this.dialogGetDetailMixins(url)
    },
    /**
     * @description: 详情回显
     * @Author: baoxuhui
     * @param {*} id
     * @return {*}
     */
    dialogFormDetail(res) {
      const data = res.data
      this.dialogForm = data
      this.dialogFormLoading = false
    }

  }
}
</script>
